<template>
<div>
  <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/study/menu', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">英国中学</h1>
  </header>
  <div class="content">
    <div class="list-block ">
    <ul>
      <li v-for="(index,item) in schools">
        <a class="item-content item-link"  v-link="{path: '/study/midinfo', query: {id: item.id}, replace: false}">
        <div class="item-inner">
	  {{ item.name }}
        </div>
        </a>
      </li>
    </ul>
    </div>
  </div>
 </div>
</template>
<script>
import $ from 'zepto'
export default {
  route: {
    data () {
      console.log('data.....')
      this.$http.get(this.apiUrl).
      then(function(response) {
        this.$set('schools', response.json().schools)
        console.log('1....' + this.schools)
      })
    }
  },
  ready () {
    $.init()
  },
  data () {
    return {
      apiUrl: 'http://creatgo.com/oec/study?method=data-school',
      schools: []
    }
  }
}
</script>
